<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
      <el-col :span="6">
        <el-form-item label="商品名称" prop="goodsName">
          <el-input
            v-model="queryParams.goodsName"
            placeholder="请输入商品名称"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="商品编号" prop="goodsId">
          <el-input
            v-model="queryParams.goodsId"
            placeholder="请输入商品编号"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="商品分类" prop="goodsClassify">
          <el-select v-model="queryParams.goodsClassify" size="small" style="width:240px" placeholder="请选择">
            <el-option
              v-for="item in goodsOptions"
              :key="item.classifyId"
              :label="item.classifyName"
              :value="item.classifyId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item>
          <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-col>
    </el-form>

    <el-table v-loading="loading" :data="goodsList" tooltip-effect="light">
      <el-table-column label="商品编号" align="center" prop="goodsId"/>
      <el-table-column label="商品名称" align="center" prop="goodsName" :show-overflow-tooltip="true"/>
      <el-table-column label="商品价格" prop="goodsPrice" align="center">
        <template slot-scope="scope">
          <el-tag type="danger">{{ scope.row.goodsPrice / '100' }}元</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="商品折扣" prop="goodsDiscount" align="center">
        <template slot-scope="scope">
          <el-tag type="warning">{{ scope.row.goodsDiscount == '100' ? '无折扣' : scope.row.goodsDiscount / '10' + '折' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="small"
            style="background:#47c8fc;color:white"
            icon="el-icon-view"
            @click="handleLook(scope.row)"
          >详情
          </el-button>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-edit-outline"
            @click="hadleStatus(scope.row)"
          >审核
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 查看商品详情对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品名称" prop="goodsName">
              <el-input v-model="form.goodsName" placeholder="请输入商品名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品品牌" prop="goodsBrand">
              <el-input v-model="form.goodsBrand" placeholder="请输入商品品牌"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品库存" prop="goodsStock">
              <el-input v-model.number="form.goodsStock" placeholder="请输入商品库存"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品分类" prop="goodsClassify">
              <el-select v-model="form.goodsClassify" style="width:100%" placeholder="请选择">
                <el-option
                  v-for="item in goodsOptions"
                  :key="item.classifyId"
                  :label="item.classifyName"
                  :value="item.classifyId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品价格" prop="goodsPrice">
              <el-input v-model="form.goodsPrice" placeholder="请输入商品价格"/>
              <el-tag type="warning">单位：分</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品折扣" prop="goodsDiscount">
              <el-input v-model.number="form.goodsDiscount" placeholder="请输入商折扣"/>
              <el-tag type="warning">例：6折 输入60；0.6折 输入6；无折扣时输入100</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交易地点" prop="dealPlace">
              <el-input v-model="form.dealPlace" placeholder="请输入交易地点"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="营业时间" prop="dealTime">
              <el-time-picker
                is-range
                v-model="form.dealTime"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="HH:mm:ss"
                value-format="HH:mm:ss"
                placeholder="选择时间范围">
              </el-time-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品介绍" prop="goodsDescribe">
              <el-input v-model="form.goodsDescribe" :rows="4" type="textarea" placeholder="请在此输入商品介绍"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="参数说明" prop="goodsSku">
              <el-input v-model="form.goodsSku" :rows="4" type="textarea" placeholder="请在此输入商品参数"/>
            </el-form-item>
          </el-col>
          <!-- 图片 -->
          <el-col :span="24">
            <el-form-item label="商品主图" prop="mainImgUrl">
              <el-upload
                ref='upload'
                action=""
                list-type="picture-card"
                accept="image/*"
                :limit="1"
                :file-list="productImgs"
                :on-preview="handlePictureCardPreview"
                :on-change="handleEdit"
                :class="{hide:hideUploadEdit}">
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible" append-to-body>
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
              <el-tag type="warning">主图仅能上传1张</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="其他图片" prop="imgUrls">
              <el-upload
                ref='uploadOther'
                action=""
                list-type="picture-card"
                accept="image/*"
                :limit="5"
                :file-list="productOtherImgs"
                :on-preview="handlePictureCardPreview"
                :on-change="handleEditOther"
                :class="{hide:hideUploadEditOther}">
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible" append-to-body>
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
              <el-tag type="warning">其他图片最多上传5张</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-button type="primary" icon="el-icon-plus" size="mini" style="margin-left:2.5%;" ></el-button> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">确 认</el-button>
      </div>
    </el-dialog>

    <!-- 审核意见 -->
    <el-dialog :title="title" :visible.sync="openAdvice" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="审核意见" prop="checkInfo">
              <el-input v-model="form.checkInfo" :rows="4" type="textarea"/>
            </el-form-item>
          </el-col>
          <el-col>
            <el-button
              style="margin-left:392px"
              type="primary"
              plain
              @click="submitPass"
            >通 过
            </el-button>
            <el-button
              type="danger"
              plain
              @click="sumbitFail"
            >不通过
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

  </div>
</template>
<script>
import { authGoods, getClassify, getGoods, listGoodsAuth } from '@/api/shop/goods'

export default {
  name: 'Goodstatus',
  inject:['reload'],//注入刷新当前页面的依赖
  data() {
    return {
      currentGoodsId: undefined,
      dialogImageUrl: '',
      dialogVisible: false,
      productImgs: [],
      productOtherImgs: [],
      hideUploadEdit: false,
      hideUploadEditOther: false,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 商品表格数据
      goodsList: null,
      // 表单参数
      form: {},
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      openAdvice: false,

      goodsOptions: [],

      queryParams: {
        pageNum: 1,
        pageSize: 10,
        goodsId: undefined,
        goodsName: undefined,
        goodsClassify: undefined

      },
      rules: {
        checkInfo: [
          { required: true, message: '审核信息不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
    this.getDicts('sys_normal_disable').then(response => {
      this.statusOptions = response.data
    })
    this.getClassify()
  },
  methods: {
    /** 查询商品列表 */
    // addDateRange 方法在 main.js中全局挂载
    getList() {
      this.loading = true
      listGoodsAuth(this.addDateRange(this.queryParams, this.dateRange)).then(
        response => {
          this.goodsList = response.rows
          this.total = response.total
          this.loading = false
        }
      )
    },
    getClassify() {
      getClassify().then(response => {
        this.goodsOptions = response.data
      })
    },
    // 图片大图预览
    handlePictureCardPreview(file) {
      this.dialogVisible = true
      this.dialogImageUrl = file.url
    },
    //主图状态改变时
    handleEdit(file, fileList) {
      this.hideUploadEdit = fileList.length >= 1
    },
    //其他图片改变时
    handleEditOther(file, fileList) {
      this.hideUploadEditOther = fileList.length >= 5
    },
    // 表单重置
    reset() {
      this.form = {
        goodsId: undefined,
        goodsName: undefined,
        goodsPrice: undefined,
        goodsDiscount: undefined,
        goodsStock: undefined,
        goodsClassify: undefined,
        goodsBrand: undefined,
        dealPlace: undefined,
        dealTime: undefined,
        status: '',
        checkInfo: undefined
      }
      this.productImgs = [],
        this.productOtherImgs = [],
        this.resetForm('form')
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = []
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 查看 */
    handleLook(row) {
      this.reset()
      const goodsId = row.goodsId || this.ids
      getGoods(goodsId).then(response => {
        response.data.goodsClassify = parseInt(response.data.goodsClassify) //将select中回显的id转化为int型，因为后台返回的id是字符串
        this.form = response.data
        this.form.dealTime = this.form.dealTime.split('-')
        let img = { url: response.data.mainImgUrl }
        this.productImgs.push(img)
        let imgs = response.data.imgUrls
        console.log(imgs)
        if (imgs != undefined && imgs.length > 0) {
          imgs.filter((item, i) => {
            this.productOtherImgs.push({ url: item })
          })
        }
        this.hideUploadEditOther = true
        this.hideUploadEdit = true
        this.open = true
        this.title = '商品详情信息'
      })
    },
    //审核按钮
    hadleStatus(row) {
      this.currentGoodsId = row.goodsId;
      this.reset()
      this.openAdvice = true
      this.title = '审核建议'
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.openAdvice = false
      this.reset()
    },

    //通过审核
    submitPass: function() {
      let goodsInfo = {}
      goodsInfo.checkInfo = this.form.checkInfo;
      goodsInfo.checkState = 1;
      goodsInfo.goodsId = this.currentGoodsId;
      this.$confirm('确认通过该商品的审核吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return authGoods(goodsInfo)
      }).then(() => {
        this.msgSuccess('审核成功')
        this.reload()
      })
    },

    //未通过审核
    sumbitFail() {
      let goodsInfo = {}
      goodsInfo.checkInfo = this.form.checkInfo;
      goodsInfo.checkState = -1;
      goodsInfo.goodsId = this.currentGoodsId;
      this.$confirm('确认不通过该商品的审核吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return authGoods(goodsInfo);
      }).then(() => {
        this.msgSuccess('审核成功')
        this.reload()
      })
    }

  }
}
</script>

<style>
.hide .el-upload--picture-card {
  display: none;
}

.el-upload--picture-card {
  width: 120px;
  height: 120px;
}

.el-upload-list--picture-card .el-upload-list__item {
  width: 120px;
  height: 120px;
}

.el-upload--picture-card i {
  font-size: 38px;
  color: #8c939d;
}
.el-tooltip__popper {
  font-size: 14px;
  width:300px;
}
</style>
